@use "sass:math"
@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "app/styles/play/variables"
@import "ace-editor"

body.is-playing
  background-color: black

#level-view
  margin: 0 auto
  position: absolute
  overflow: hidden
  left: 0
  right: 0
  bottom: 0
  top: 0
  @include user-select(none)

  &.real-time
    // Hmm, somehow the #page-container is cutting us off by ~17px on the right, looks a bit off.

    &.real-time.game-dev
      #canvas-wrapper
        width: 80%

    #canvas-wrapper
      width: 100%
      canvas
        margin: 0 auto
      #normal-surface
        left: 0
        right: 0
        margin-left: auto
        margin-right: auto
    #control-bar-view
      width: 100% !important
      button, h4
        display: none
    #code-area, #thang-hud, #goals-view
      display: none
      visibility: hidden
    #gold-view
      right: 1%
      @include box-shadow(-1px 1px 10px cyan)
      .team-gold
        font-size: 2vw
        line-height: 2vw
        img
          width: 1.8vw
          height: 1.8vw
    #duel-stats-view
      .duel-stats-background
        opacity: 0.8
    #control-bar-view .title
      left: 20%
      width: 60%
      text-align: center
    #level-dialogue-view
      display: none

    .level-content
      margin: 0px auto

  .level-content
    position: relative
    min-height: 555px
    //background-color: black

  &.real-time
    &:not(.flags)
      #playback-view
        width: 100%

    &.flags
      #playback-view
        $flags-width: 200px
        width: 90%
        width: -webkit-calc(100% - 200px)
        width: calc(100% - 200px)
        left: $flags-width

    #stop-real-time-playback-button
      display: block
      z-index: 20

  #canvas-wrapper
    top: $control-bar-height
    width: calc(57% - 200px)
    width: $game-view-width
    position: relative
    overflow: hidden
    background-color: black
    //@include transition(all $level-resize-transition-time ease-out, z-index 1.2s linear)
    z-index: 0

    &.preview-overlay
      z-index: 20
      #goals-view
        visibility: hidden

  canvas#webgl-surface
    background-color: #333
    z-index: 1

  canvas#normal-surface
    z-index: 1
    position: absolute
    top: 0
    left: 0
    pointer-events: none

  canvas#webgl-surface, canvas#normal-surface
    display: block
    z-index: 2
    //@include transition($level-resize-transition-time ease-out)

    &.grabbable:not(.flag-color-selected)
      cursor: -moz-grab
      cursor: -webkit-grab
      cursor: grab

      &:active
        cursor: -moz-grabbing
        cursor: -webkit-grabbing
        cursor: grabbing

    &.flag-color-selected
      cursor: crosshair

  #code-area
    width: 43.5%
    width: $code-area-width
  #solution-area
    right: 43.5%
    right: $code-area-width

  &.blocks #code-area
    width: 43.5%
    width: $code-area-width-blocks

  #code-area, #solution-area
    @include box-sizing(border-box)
    padding: 0 0 10px 0
    width: 43.5%
    width: $code-area-width
    background: transparent url(/images/level/wood_texture.png)
    background-size: 100% 100%
    position: absolute
    right: 0
    top: 0px
    bottom: 0
    @include transition(bottom $level-resize-transition-time ease)
    z-index: 2
    box-shadow: 10px 4px 4px black
    margin-bottom: 10px

  #solution-area
    right: 43.5%
    right: $code-area-width
    width: 30%
    width: calc(0.75 * $code-area-width)
    transform: translate(54px, -110%)
    transition: transform 1s
    z-index: 10
    bottom: unset
    max-height: 100vh
    overflow: hidden
    box-shadow: none
    background: transparent
    opacity: 0
    pointer-events: none

    .ace_gutter-layer
      pointer-events: none

    &.display
      transform: translate(54px, 0)
      pointer-events: auto
      opacity: 1

      .ace_gutter-layer
        pointer-events: auto

    #solution-view
      margin-top: 10px
      position: relative
      padding-top: 40px
      display: flex
      z-index: 5
      overflow: visible
      height: auto
      min-height: 0

      span.code-background
        border: 1px solid transparent
        border-width: 115px 76px 64px 40px
        border-image: url(/images/level/code_editor_background_border.png) 124 76 64 40 fill stretch
        filter: brightness(1.2)
        position: absolute
        top: -68px
        left: 0px
        bottom: -20px
        right: -10px
        z-index: -1

      .solution-label
        position: absolute
        top: 10px
        left: 26px
        z-index: 4
        font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif
        font-size: 18px
        padding: 0px 10px
        color: #6E654B
        font-weight: bold
        text-transform: uppercase

      .close-solution-btn
        cursor: pointer
        position: absolute
        top: 6px
        right: 26px
        z-index: 4
        font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif
        font-size: 32px
        padding: 0px 10px
        color: #6E654B
        font-weight: bold
        text-transform: uppercase

      .apply-solution-btn
        cursor: pointer
        position: absolute
        top: 10px
        right: 80px
        z-index: 4

      @include ace
      
    
  #game-area
    position: relative
    overflow: hidden
    box-shadow: 10px 4px 4px black

  // Level Docs
  .ui-effects-transfer
    border: 2px dotted gray

  .modal
    img
      float: right

    img.diagram
      float: none

  #multiplayer-join-link
    font-size: 12px

  // Custom Buttons
  .btn.banner
    @include banner-button(#FFF, #333)
    @include box-shadow(2px 2px 2px rgba(0, 0, 0, 0.5))
    border: 1px solid black
    text-shadow: none

    $buttonConfig: 'primary' #6CA8EA, 'info' #71AACC, 'success' #90B236, 'warning' #CD6800, 'danger' #B43C20, 'inverse' #3A537F
    @each $tuple in $buttonConfig
      &.btn-#{nth($tuple, 1)}
        @include banner-button(nth($tuple, 2), #FFF)

  $GI: 0.5  // gradient intensity; can tweak this 0-1

  .gradient
    position: absolute
    z-index: 5

  #code-area-gradient
    top: 0px
    width: 3px
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,$GI) 100%)
    left: -3px
    bottom: 0

  #canvas-left-gradient
    left: 0px
    width: 5px
    background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
    bottom: -30px
    top: 0

  #canvas-top-gradient
    top: 0
    height: 5px
    left: 0
    right: 0
    background: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)

  #hud-left-gradient
    background: linear-gradient(to right, rgba(0,0,0,$GI) 0%,rgba(0,0,0,0) 100%)
    left: 0
    top: 0
    height: 100%
    width: 2%

  #hud-right-gradient
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,$GI) 100%)
    right: 0
    position: absolute
    top: 0
    height: 100%
    width: 2%

  #play-footer
    width: 57%
    width: $game-view-width

  &.blocks #play-footer
    width: 57%
    width: $game-view-width-blocks

  #play-footer
    position: absolute
    bottom: 0px
    width: calc(57% - 200px)
    width: $game-view-width
    text-align: center
    font-family: $headings-font-family
    font-variant: small-caps
    font-size: 25px
    padding: 0 0
    @include transition(opacity .10s linear)
    @include opacity(0.6)

    &:hover
      @include opacity(1)

    a
      @include opacity(0.75)
      @include transition(opacity .10s linear)
      color: white

      &:hover, &:active
        @include opacity(1)

    @media screen and (min-aspect-ratio: 17/10)
      &:not(.premium)
        display: none

  #level-footer-shadow
    position: absolute
    bottom: 0
    width: 100%
    height: 10px
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)
    pointer-events: none

  #stop-real-time-playback-button
    display: none
    position: absolute
    // bottom: 70px // Set via javascript because of gamedev level sizing
    right: 15px
    font-size: 30px

  #cinematic-code-display
    display: none
    position: absolute
    right: 0px
    top: 0px
    padding: 10px
    font-size: 2.2vw
    text-align: left
    background-color: rgba(0, 0, 0, 0.7)
    border-bottom-right-radius: 8px
    max-width: 35%
    z-index: 20

    .code-line
      line-height: 1.2em
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap

    code
      background-color: transparent
      padding: 0
      color: rgb(120, 255, 245)
      white-space: pre
      line-height: 0px

      &.line-number
        width: 2vw
        display: inline-block

    .code-line-2, .code-line-4
      opacity: 0.7

    .code-line-1, .code-line-5
      opacity: 0.6

    .code-line-0, .code-line-6
      opacity: 0.5

  .hints-view
    position: absolute
    top: 10px
    max-height: 93%
    right: 45%
    z-index: 1000000

  .game-container, .level-content
    height: 100%

  #canvas-wrapper
    width: 57%
    width: $game-view-width

  &.real-time
    #canvas-wrapper
      width: 100%

  &.blocks
    #spell-palette-view
      display: none
    #canvas-wrapper
      width: 57%
      width: $game-view-width-blocks

  &.web-dev
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0

    #playback-view, #thang-hud, #level-dialogue-view, #play-footer, #level-footer-background
      display: none

    .game-container, .level-content, #game-area, #canvas-wrapper
      height: 100%

    #canvas-wrapper
      height: calc(100% - $control-bar-height)

    #canvas-wrapper canvas
      display: none

    #web-surface-view
      position: absolute
      top: 0
      right: 0
      left: 0
      bottom: 0

  #how-to-play-game-dev-panel
    position: absolute
    right: 0
    top: 52px
    width: 20%
    bottom: 38px

  .game-container .level-content
    #code-area #spell-top-bar-view
      display: none
      height: 0
      padding: 0

  #canvas-wrapper
    top: 0

  &.game-dev
    #playback-view, #thang-hud, #level-footer-shadow
      display: none

  &:not(.text-code), &.cinematic
    .game-container .level-content #code-area
      padding: 0
      margin: 0

      #spell-view
        position: static

      .spell-toolbar-view
        width: 100%
        margin: 0
        position: absolute
        bottom: 0

      .code-background
        height: calc(100% + 25px)

  &.blocks-icons, &.blocks-text
    #tome-view #spell-view
      .ace_editor
        visibility: hidden
        width: 1px

      .blockly-container
        left: 0

  &.blocks-icons, &.blocks-text, &.blocks-and-code
    .save-status, .programming-language-container
      display: none

  &[data-control-bar-location="left"], &[data-control-bar-location="top"]
    #game-area
      top: $control-bar-height

  &[data-control-bar-location="right"], &[data-control-bar-location="none"]
    #game-area
      top: 0

  &[data-control-bar-location="left"]
    .game-container .level-content #control-bar-view
        @media screen and (max-width: 1920px)
          .wood-background
            background-size: cover
            height: $control-bar-height

          .left-cap
            display: none

          .levels-link-area
            width: auto

            .levels-link
              font-size: 20px

        @media screen and (max-width: 1366px)
          .buttons-area #game-menu-button .game-menu-text, .home-text, .right-cap, .right-chain
            display: none

          .buttons-area
            right: 10px
            top: 4px

          .level-name-area
            min-width: 140px
            max-width: 240px

            .level-label
              display: none

  &[data-control-bar-location="right"]
    .game-container .level-content #control-bar-view
        .wood-background
          background-size: cover
          height: $control-bar-height

        .left-cap, .buttons-area #game-menu-button .game-menu-text, .home-text, .right-cap, .right-chain
          display: none

        .levels-link-area
          width: auto

          .levels-link
            font-size: 20px

        .buttons-area
          right: 10px
          top: 4px

        .level-name-area
          min-width: 140px
          max-width: 240px

          .level-label
            display: none

  &[data-control-bar-location="top"]
    @media screen and (max-width: 700px)
      .game-container .level-content #control-bar-view
          .wood-background
            background-size: cover
            height: $control-bar-height

          .left-cap, .buttons-area #game-menu-button .game-menu-text
            display: none

          .levels-link-area
            width: auto

            .levels-link
              font-size: 20px

          .home-text
            display: none

            .right-cap, .right-chain
              display: none

            .buttons-area
              right: 10px
              top: 4px

            .level-name-area
              min-width: 140px
              max-width: 240px

              .level-label
                display: none

  &[data-playback-location="bottom"]
    #playback-view
      background: transparent
      margin-bottom: -2px

      .scrubber
        height: 14px
        top: 28px

        .scrubber-inner
          padding: 1px

          .progress
            height: 8px

            .scrubber-handle
              width: 30px
              height: 30px

  &[data-tome-location="bottom"]
    #code-area
      overflow: hidden

  &[data-hud-location="none"]
    #thang-hud
      display: none

  &.blocks-and-code, &.text-code
    // TODO: better conditions for when to trigger this (when we won't have enough width to show the code)
    @media screen and (max-width: 932px) and (max-height: 500px) and (max-aspect-ratio: 932 / 375)
      &.cinematic #cinematic-code-display
        // Show the smallest version of the executing code we can
        display: block

      &.cinematic #tome-view #spell-view .ace_editor
        // We don't have enough space to display this; blank it out in favor of cinematic playback code view
        visibility: hidden

  &.cinematic
    .game-container .level-content #control-bar-view
      .left-cap, .right-cap, .center-chain, .right-chain, .wood-background, .levels-link-area, .buttons-area
        display: none

    .game-container .level-content #playback-view
      margin-top: -50px

      button
        display: none

      .scrubber
        background: rgba(3, 3, 3, 0.2)
        left: 20px
        right: 30px

    #stop-cinematic-playback-button
      display: block

    .cast-button
      display: none

    #canvas-wrapper
      top: 0

    #tome-view.blocks #spell-view .blockly-container
      //.blocklyFlyout, .blocklyFlyoutScrollbar, .blocklyTrash, .blocklyZoomOut, .blocklyZoomIn, .blocklyZoomReset
      .blocklyTrash, .blocklyZoomOut, .blocklyZoomIn, .blocklyZoomReset
        display: none
        visibility: hidden
        width: 0

      .blocklySvg
        background: transparent

  &.cinematic-old
    // TODO: try reintegrating this in certain cases
    // Hmm, somehow the #page-container is cutting us off by ~17px on the right, looks a bit off.

    #canvas-wrapper
      width: 100%
      canvas
        margin: 0 auto
      #normal-surface
        left: 0
        right: 0
        margin-left: auto
        margin-right: auto
    #control-bar-view
      width: 100% !important
      button, h4
        display: none
    #code-area, #thang-hud, #goals-view
      display: none
      visibility: hidden
    #gold-view
      right: 1%
      @include box-shadow(-1px 1px 10px cyan)
      .team-gold
        font-size: 2vw
        line-height: 2vw
        img
          width: 1.8vw
          height: 1.8vw
    #duel-stats-view
      .duel-stats-background
        opacity: 0.8
    #control-bar-view .title
      left: 20%
      width: 60%
      text-align: center
    #level-dialogue-view
      display: none

    .level-content
      margin: 0px auto

  .level-content
    position: relative
    min-height: 555px
    //background-color: black

  &.junior
    // Remove interface elements with unwanted reading
    .game-container .level-content
      #control-bar-view
        .buttons-area #game-menu-button .game-menu-text
          display: none

        .home-text
          display: none

#level-footer-background
  display: none
  position: absolute
  background: linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) ), url(/images/level/footer_background.jpg) no-repeat
  bottom: 0
  width: 100%
  background-size: cover
  height: Max(400px, calc(100vh - (100vw * 0.57 - 200px - 17px) * 589 / 924 - $control-bar-height - 43px - 80px))
  z-index: -9001
